<template>
  <div class="search">
    <Card>
      <Row class="operation padding-row" v-if="!selectedMember">
        <Button @click="addMember" type="primary">添加等级</Button>
      </Row>

      <Table :loading="loading" border :columns="columns" class="mt_10" :data="data" ref="table"></Table>
      <Row type="flex" justify="end" class="mt_10">
        <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage"
          @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50, 100]" size="small" show-total
          show-elevator show-sizer></Page>
      </Row>
    </Card>

    <!-- 添加用户模态框 -->
    <Modal v-model="addFlag" title="添加等级">
      <Form ref="addMemberForm" :model="addMemberForm" :rules="addRule" :label-width="100">
        <FormItem label="等级名称" prop="name" style="width: 90%">
          <Input v-model="addMemberForm.name" maxlength="15" placeholder="请输入等级名称" />
        </FormItem>
        <FormItem label="会员等级" prop="level" style="width: 90%">
          <Input-number :max="10000" :min="1" v-model="addMemberForm.level" style="width: 100%"></Input-number>
        </FormItem>
        <!-- <FormItem label="享受折扣" prop="rebate" style="width: 90%">
          <Input-number :max="10" :min="0" v-model="addMemberForm.rebate" style="width: 100%"></Input-number>
        </FormItem> -->
        <FormItem label="充值折扣" prop="rebate" style="width: 90%">
          <Input-number :max="10" :min="0" v-model="addMemberForm.rechargeRule" style="width: 100%"></Input-number>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="addFlag = false">取消</Button>
        <Button type="primary" @click="addMemberSubmit">确定</Button>
      </div>
    </Modal>
    <!-- 修改模态框 -->
    <Modal v-model="descFlag" :title="descTitle" width="500">
      <Form ref="form" :model="form" :rules="ruleValidate" :label-width="80">
        <FormItem label="等级名称" prop="name">
          <Input v-model="form.name" style="width: 200px" />
        </FormItem>
        <FormItem label="会员等级" prop="level">
          <Input-number :max="10000" :min="1" v-model="form.level" style="width: 200px"></Input-number>
        </FormItem>
        <!-- <FormItem label="享受折扣" prop="rebate">
          <Input-number :max="10" :min="0" v-model="form.rebate" style="width: 200px"></Input-number>
        </FormItem> -->
        <FormItem label="充值折扣" prop="rebate">
          <Input-number :max="1" :min="0.1" v-model="form.rechargeRule" style="width: 200px"></Input-number>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="descFlag = false">取消</Button>
        <Button type="primary" @click="handleSubmitModal">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import region from "@/views/lili-components/region";
  import * as API_Member from "@/api/member.js";
  import ossManage from "@/views/sys/oss-manage/ossManage";
  import * as RegExp from "@/libs/RegExp.js";

  export default {
    name: "member",
    components: {
      region,
      ossManage,
    },
    data() {
      return {
        descTitle: "", // modal标题
        descFlag: false, //编辑查看框
        loading: true, // 表单加载状态
        addFlag: false, // modal显隐控制
        addMemberForm: {
          // 添加用户表单
          gradeExplain: '',
          grade: 1,
          gradeInterest: 1,
          money: '',
          integral: ''
        },
        searchForm: {
          // 请求参数
          pageNumber: 1,
          pageSize: 10,
          order: "desc",
          // username: "",
          // mobile: "",
          disabled: "OPEN",
        },
        // 修改对象
        form: {
          gradeExplain: '',
          grade: 1,
          gradeInterest: 1,
          money: '',
          integral: '',
          id: ''
        }, // 表单数据
        addRule: {
          name: [{
            required: true,
            message: "请输入等级名称"
          }],
          level: [{
            required: true,
            message: "请输入会员等级"
          }],
          // rebate: [{
          //   required: true,
          //   message: "请输入享受折扣"
          // }],
          rechargeRule: [{
            required: true,
            message: "请输入充值折扣"
          }],
        },
        ruleValidate: {
          name: [{
            required: true,
            message: "请输入等级名称"
          }],
          level: [{
            required: true,
            message: "请输入会员等级"
          }],
          // rebate: [{
          //   required: true,
          //   message: "请输入享受折扣",
          // }],
          rechargeRule: [{
            required: true,
            message: "请输入充值折扣"
          }],
        }, //修改验证
        columns: [{
            title: "等级名称",
            key: "name",
            tooltip: true,
          },
          {
            title: "会员等级",
            key: "level",
            tooltip: true,
          },
          // {
          //   title: "享受折扣",
          //   key: "rebate",
          //   tooltip: true,
          // },
          {
            title: "操作",
            key: "action",
            align: "center",
            width: 200,
            fixed: "right",
            render: (h, params) => {
              return h(
                "div", {
                  style: {
                    display: "flex",
                    justifyContent: "center",
                  },
                },
                [
                  h(
                    "Button", {
                      props: {
                        size: "small",
                        type: params.row.___selected ? "primary" : "default",
                      },
                      style: {
                        marginRight: "5px",
                        display: this.selectedMember ? "block" : "none",
                      },
                      on: {
                        click: () => {
                          this.callback(params.row, params.index);
                        },
                      },
                    },
                    params.row.___selected ? "已选择" : "选择"
                  ),

                  h(
                    "Button", {
                      props: {
                        type: "error",
                        size: "small",
                      },
                      style: {
                        marginRight: "5px",
                        display: this.selectedMember ? "none" : "block",
                      },
                      on: {
                        click: () => {
                          this.delete(params.row);
                        },
                      },
                    },
                    "删除"
                  ),
                  h(
                    "Button", {
                      props: {
                        type: "info",
                        size: "small",
                        ghost: true,
                      },
                      style: {
                        marginRight: "5px",
                        display: this.selectedMember ? "none" : "block",
                      },
                      on: {
                        click: () => {
                          this.editPerm(params.row);
                        },
                      },
                    },
                    "编辑"
                  ),
                ]
              );
            },
          },
        ],
        data: [], // 表单数据
        total: 0, // 表单数据总数
        selectMember: [], //保存选中的用户
      };
    },
    props: {
      // 是否为选中模式
      selectedMember: {
        type: Boolean,
        default: false,
      },
      // 已选择用户数据
      selectedList: {
        type: null,
        default: () => {
          return [];
        },
      },
    },
    watch: {
      selectedList: {
        handler(val) {
          this.$set(this, "selectMember", JSON.parse(JSON.stringify(val)));
          this.init(this.data);
          // 将父级数据与当前组件数据进行匹配
        },
        deep: true,
        immediate: true,
      },
    },
    methods: {
      //查询会员等级列表
      getData() {
        API_Member.getMembergrade(this.searchForm).then((res) => {
          if (res.result.records) {
            this.loading = false;
            this.init(res.result.records);
            this.total = res.result.total;
          }
        });
      },
      // 分页 改变页码
      changePage(v) {
        this.searchForm.pageNumber = v;
        this.getData();
      },
      // 分页 改变页数
      changePageSize(v) {
        this.searchForm.pageSize = v;
        this.searchForm.pageNumber = 1;
        this.getData();
      },
      //添加等级按钮点击
      addMember() {
        this.addFlag = true;
        this.$refs.addMemberForm.resetFields();
      },
      //添加等级提交
      addMemberSubmit() {
        this.$refs.addMemberForm.validate((valid) => {
          if (valid) {
            API_Member.getaddMembergrade(this.addMemberForm).then((res) => {
              if (res.result) {
                this.$refs.addMemberForm.resetFields();
                this.getData();
                this.$Message.success("添加成功！");
                this.addFlag = false;
              }
            });
          } else {
            this.$Message.error('必填项不能为空!');
            return false
          }
        });
      },
      // 回调给父级
      callback(val, index) {
        this.$set(val, "___selected", !val.___selected);
        console.log(val.___selected);
        console.log(this.selectMember);
        let findUser = this.selectMember.find((item) => {
          return item.id == val.id;
        });
        // 如果没有则添加
        if (!findUser) {
          this.selectMember.push(val);
        } else {
          // 有重复数据就删除
          this.selectMember.map((item, index) => {
            if (item.id == findUser.id) {
              this.selectMember.splice(index, 1);
            }
          });
        }
        this.$emit("callback", val);
      },
      // 初始化信息
      init(data) {
        data.forEach((item) => {
          if (this.selectMember.length != 0) {
            this.selectMember.forEach((member) => {
              if (member.id == item.id) {
                this.$set(item, "___selected", true);
              }
            });
          } else {
            this.$set(item, "___selected", false);
          }
        });
        this.data = data;
      },
      //查看详情修改
      editPerm(val) {
        this.descTitle = `编辑等级 ${val.gradeExplain}`;
        this.descFlag = true;
        this.getMemberInfo(val.id);
        this.form.id = val.id
      },
      // 查询查看等级详情
      getMemberInfo(id) {
        API_Member.getdetMembergrade(id).then((res) => {
          if (res.result) {
            this.$set(this, "form", res.result);
          }
        });
      },
      // 提交修改数据
      handleSubmitModal() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            let params = {
              gradeExplain: this.form.gradeExplain,
              grade: this.form.grade,
              gradeInterest: this.form.gradeInterest,
              money: this.form.money,
              integral: this.form.integral,
              id: this.form.id,
            }
            API_Member.getaddMembergrade(params).then((res) => {
              if (res.code == 200) {
                this.descFlag = false;
                this.$Message.success("修改成功！");
                this.getData();
              }
            });
          } else {
            this.$Message.error('必填项不能为空!');
            return false
          }
        });
      },
      //删除等级
      delete(v) {
        let delById = v.id
        this.$Modal.confirm({
          title: "提示",
          content: "<p>确认删除此会员等级？</p>",
          onOk: () => {
            API_Member.getdelMembergrade(delById).then((res) => {
              if (res.success) {
                this.$Message.success("删除成功！");
                this.getData();
              } else {
                // this.$Message.error(res.message);
              }
            });
          },
        });
      },
    },
    mounted() {
      this.getData();
    },
  };
</script>
<style lang="scss" scoped>
  /deep/ .ivu-table-wrapper {
    width: 100%;
  }

  /deep/ .ivu-card {
    width: 100%;
  }

  .face {
    width: 60px;
    height: 60px;
    border-radius: 50%;
  }
</style>
